<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Switch from "./Switch.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { Avatar } from "../Avatar";

    const { Story } = defineMeta({
        title: "Components/Form/Switch",
        component: Switch,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Switch
            onchange={(v: boolean) => {
                console.log({
                    content: "状态改变:" + v,
                    duration: 1,
                });
            }}
        />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Switch {...args} />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <Space dir="h">
            <Switch size="large" />
            <Switch />
            <Switch size="small" />
        </Space>
    {/snippet}
</Story>

<Story name="Loading" args={{ loading: true }}>
    {#snippet template(args)}
        <Space dir="h">
            <Switch size="large" {...args} />
            <Switch {...args} checked />
            <Switch size="small" {...args} />
        </Space>
    {/snippet}
</Story>

<Story name="Labels" args={{ labels: ["开", "关"] }}>
    {#snippet template(args)}
        <Space dir="h">
            <Switch {...args} />
        </Space>
    {/snippet}
</Story>

<Story name="Values" args={{ values: [1, 0] }}>
    {#snippet template(args)}
        <Space dir="h">
            <Switch
                labels={["ON", "OFF"]}
                {...args}
                onchange={(v: number) => {
                    console.log("值:" + v);
                }}
            />
        </Space>
    {/snippet}
</Story>

<Story name="BeforeChange">
    {#snippet template(args)}
        <Switch
            onBeforeChange={(checked: boolean) => {
                return new Promise((resolve) => {
                    // modal.info({
                    //     title: "提示",
                    //     content: "确认进行切换？",
                    //     onOk: () => {
                    //         resolve(true);
                    //     },
                    // });
                });
            }}
        />
    {/snippet}
</Story>

<Story name="Square">
    {#snippet template(args)}
        <Space dir="h">
            <Switch {...args} />
            <Switch {...args} round={false} />
        </Space>
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        {#snippet offIcon()}
            <Icon icon="f7:arrow-left-circle" width={20} height={20} style="color: var(--cui-color-link)" />
        {/snippet}
        {#snippet onIcon()}
            <Icon icon="f7:arrow-right-circle" width={20} height={20} style="color: var(--cui-color-link)" />
        {/snippet}
        <Space dir="h">
            <Switch {...args}>
                {#snippet icon()}
                    <Icon icon="f7:gear-alt" style="color: var(--cui-color-link)" />
                {/snippet}
            </Switch>
            <Switch {...args} size="large" icon={[offIcon, onIcon]} />
        </Space>
    {/snippet}
</Story>

<Story name="Color">
    {#snippet template(args)}
        <Space dir="h">
            <Switch {...args} labels={["去球场打球", "在家中休息"]} colors={["red", "green"]} />
        </Space>
    {/snippet}
</Story>
